<template>
  <section>
    <!-- 面包屑 -->
     <breadcrumbs></breadcrumbs>
    <div>
      <el-form :inline="true"
               :model="formInline"
               class="demo-form-inline">
        <el-form-item label="拓客明细统计"
                      class="date-box">
          <el-date-picker v-model="formInline.date"
                          type="daterange"
                          format="yyyy-MM-dd HH:mm:ss"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="search">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="data-container scroll-table">
      <!-- 按钮列表 -->
      <el-table :data="tableData"
                border
                style="width: 100%"
                @selection-change="tableSelectionChange">
        <el-table-column type="index"
                         label="序号"
                         width="50">
        </el-table-column>
        <el-table-column prop="nickname"
                         label="用户昵称">
        </el-table-column>
        <el-table-column prop="phoneNum"
                         label="电话号码">
        </el-table-column>
        <el-table-column prop="orderCount"
                         label="总投递个数">
          <template slot-scope="scope">
            <div v-if="scope.row.orderCount==null||scope.row.orderCount==undefined">0</div>
            <div v-else>{{scope.row.orderCount}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="rewardInte"
                         label="奖励积分">
          <template slot-scope="scope">
            <div v-if="scope.row.rewardInte==null||scope.row.rewardInte==undefined">0</div>
            <div v-else>{{scope.row.rewardInte}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="rewardMoney"
                         label="奖励现金">
          <template slot-scope="scope">
            <div v-if="scope.row.rewardMoney==null||scope.row.rewardMoney==undefined">0</div>
            <div v-else>{{scope.row.rewardMoney/100}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime"
                         label="注册时间">
        </el-table-column>
        <el-table-column prop="state"
                         label="状态">
          <template slot-scope="scope">
            <div v-if="scope.row.state==1">启用</div>
            <div v-if="scope.row.state==0">禁用</div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="mgt-10 pd-0"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="searchForm.current"
                     :page-sizes="[10, 20, 30, 50]"
                     :page-size="searchForm.size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="searchForm.totalCount">
      </el-pagination>
    </div>
  </section>
</template>

<script>
import breadcrumbs from "@/components/breadcrumbs.vue";
export default {
  name: "houseDetail",
  components: {

    breadcrumbs,
  },
  data () {
    return {
      formInline: {
        date: [],
      },
      userId: "",
      tableData: [],
      searchForm: {
        current: 1,
        size: 10,
        totalCount: 0
      },
    }
  },
  created () {
    // console.log(this.$route.query.id)
    this.userId = this.$route.query.userId;
    console.log(this.userId)
    this.houseData(1, 10, this.userId);
  },
  methods: {
    handleReset () {
      this.formInline.date = [];
      this.houseData(this.searchForm.current, this.searchForm.size, this.userId)
    },
    search () {
      this.houseData(this.searchForm.current, this.searchForm.size, this.userId)
    },
    houseData (cur,siz,uid) {
      //  if (this.formInline.date && this.formInline.date.length == 2) {
      //   this.formInline.startTime = this.format(this.formInline.date[0]);
      //   this.formInline.endTime = this.format(this.searchForm.date[1]);
      // }
      if (this.formInline.date.length > 0) {
        this.$api.toker.getUserInviteDetail({
          userId: uid,
          beginTime: this.formInline.date[0],
          endTime: this.formInline.date[1],
          current:cur,
          size:siz
        }).then(res => {
          if (res.code == 200) {
            this.tableData = res.data
            this.searchForm = {
              size: res.pageSize,
              totalCount: res.totalCount
            }

          }
        })
      } else {
        this.$api.toker.getUserInviteDetail({
          userId: uid
        }).then(res => {
          if (res.code == 200) {
            this.tableData = res.data
            this.searchForm = {
              size: res.pageSize,
              totalCount: res.totalCount
            }
          }
        })
      }
    },
    handleSizeChange (v) {
      console.log(v)
      this.searchForm.size = v;
      this.houseData(this.searchForm.current, v, this.userId);
    },
    handleCurrentChange (v) {
      this.searchForm.current = v;
      this.houseData(v, this.searchForm.size, this.userId);
    },
    tableSelectionChange (val) {
      this.tableSelection = val;
    },
  }
}
</script>

<style scoped>
</style>